<template>
    <div>
        <div class="tools-div">
            <el-button type="success" size="small" @click="addShow">添 加</el-button>
        </div>
        <!-- 展示品牌的表格 -->
        <div>
            <el-table :data="brands" style="width: 100%">
                <el-table-column prop="name" label="品牌名称" />
                <el-table-column prop="logo" label="品牌图标" #default="scope">
                    <img :src="scope.row.logo" width="50" />
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column
                                 label="操作"
                                 align="center"
                                 width="200"
                                 #default="scope"
                                 >
                    <el-button
                               type="primary"
                               size="small"
                               @click="handleShowUpdateDialog(scope.row)"
                               >
                        修改
                    </el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.row)">
                        删除
                    </el-button>
                </el-table-column>
            </el-table>

            <el-pagination
                           v-model:current-page="pageNum"
                           v-model:page-size="pageSize"
                           :page-sizes="[1, 2, 3, 4, 5]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total"
                           @size-change="initData"
                           @current-change="initData"
                           />
        </div>
        <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">
            <el-form label-width="120px">
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.name" />
                </el-form-item>
                <el-form-item label="品牌图标">
                    <el-upload
                               class="avatar-uploader"
                               :action="uploadUrl"
                               :headers="headers"
                               :on-success="handleUploadSuccess"
                               :on-error="handleUploadError"
                               :show-file-list="false"
                               >
                        <img v-if="brand.logo" :src="brand.logo" class="avatar-uploader-icon" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSaveOrUpdate">提交</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {getBrands,saveBrand,deleteBrandById,updateBrand,getBrandById,getAllBrands} from '@/api/brand'
import { useApp } from '@/pinia/modules/app'
import { ElMessage } from 'element-plus'

const headers=ref({token:useApp().authorization.token})
const uploadUrl=ref('http://localhost:8081/admin/system/file/upload/logo')

const handleUploadSuccess=response=>{
    if(+response.code===200){
        brand.value.logo=response.data
        ElMessage.success('上传成功')
       
    }else{
        ElMessage.error(response.message)
    }
}
const handleUploadError=error=>{
    ElMessage.error('网络错误')
    dialogVisible.value = false
}
const defaultForm={
    logo:''
}
const brand =ref(defaultForm)

const dialogVisible = ref(false)

const addShow=()=>{
    brand.value={logo:'',}
    dialogVisible.value=true
}
const handleSave=async()=>{
    await saveBrand(brand.value)
    ElMessage.success("添加成功")
    dialogVisible.value=false
    initData()
}

const handleDel=async(row)=>{
    await deleteBrandById(row.id)
    initData()
}


const handleSaveOrUpdate=()=>{
    if(brand.value.id){
        handleUpdate()
    }else{
        handleSave()
    }
}
const handleShowUpdateDialog=(row)=>{
    brand.value=JSON.parse(JSON.stringify(row))
    dialogVisible.value=true
}

const handleUpdate=async()=>{
    await updateBrand(brand.value)
    ElMessage.success("修改成功")
    dialogVisible.value=false
    initData()
}



const brands = ref([])
const pageNum = ref(1)
const pageSize = ref(3)
const total = ref(0)
const initData=async()=>{
    const{data}=await getBrands(pageNum.value,pageSize.value)
    brands.value=data.list
    total.value=data.total
}

onMounted(() => {
        initData()
    })


</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>